<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增进度填报')"/>
    <th:block th:include="include :: bootstrap-fileinput-css" />
    <link rel="stylesheet" th:href="@{/jadeEasyUi/otherControls/layui/css/layui.css}">

    <th:block th:include="include :: datetimepicker-css"/>

    <link rel="stylesheet" th:href="@{/css/disinfection.css}">
    <style>
        div.layui-input-inline{
            background-color: #fff;
            height: 38px;
            line-height: 38px;
        }
        .container{
            width: 100%;
        }
        div.layui-input-inline select{
            display: block;
        }
        .file-drop-zone-title{
            padding: 70px 10px;
        }
        .krajee-default.file-preview-frame .kv-file-content{
            height: 100px;
        }
        .krajee-default.file-preview-frame,.krajee-default .file-footer-caption{
            margin: 0px;
        }
        img.file-preview-image kv-preview-data{
            max-height: 105%
        }
        .krajee-default .file-thumb-progress{
            display: none!important;
        }
        tr.info {
            background-color: #d9edf7;
        }
        tbody tr{
            text-align: center;
        }
        button.fileinput-remove{
            display: none!important;
        }
    </style>
</head>
<body class="white-bg">

<div class="container">
    <div class="container_row" >项目名称: <span th:text="${taskfill.projectName}"></span></div>

    <div class="layui-tab layui-tab-card">
        <ul class="layui-tab-title">
            <li class="layui-this">实施情况</li>
            <li>历史调度情况</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-elem-quote">
                    <h2>项目基本信息</h2>
                </div>
                <form class="layui-form" id="task-edit">
                    <input type="hidden" name="taskId" th:value="${taskfill.taskId}">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">调度任务期号:</label>
                            <div class="layui-input-inline" th:text="${taskfill.taskNum}">12356
                                <!--<input type="tel" name="phone" lay-verify="required|phone" autocomplete="off"-->
                                       <!--class="layui-input">-->

                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">填报截止时间:</label>
                            <div class="layui-input-inline" th:text="${#dates.format(taskfill.taskEndTime, 'yyyy-MM-dd')}">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">开工情况:</label>
                            <div class="layui-input-inline">
                                <select name="taskLevel"  class="form-control m-b" th:with="type=${@dict.getType('task_level')}">
                                    <option value="">所有</option>
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:selected="${taskfill.taskLevel eq dict.dictValue}"></option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">实际开工时间:</label>
                            <div class="layui-input-inline" th:text="${#dates.format(taskfill.projectStartTime, 'yyyy-MM-dd')}">

                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">建设单位:</label>
                            <div class="layui-input-inline" th:text="${taskfill.companyName}">

                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">形象进度:</label>
                            <div class="layui-input-inline">
                                <select name="imageProcess" id="" class="form-control m-b" th:with="type=${@dict.getType('task_process')}">
                                    <option value="">所有</option>
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:selected="${taskfill.imageProcess eq dict.dictValue}"></option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item" style="height: 70px;line-height: 70px">
                        <div class="layui-block" >
                            <label class="layui-form-label" style="width: calc(100% - 78.5%) !important;height: 70px;line-height: 50px">进展情况:</label>
                        </div>
                        <div class="layui-inline" style="margin-left: 20px;width: calc(70% - 20px) !important;">
                            <textarea name="taskInfo" class="form-control" style="border-color: #666;" required  th:field="${taskfill.taskInfo}"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item" style="height: 320px;">
                        <div class="layui-block" >
                            <label class="layui-form-label" style="width: calc(100% - 78.5%) !important;height: 320px;line-height: 240px">调度图片:</label>
                        </div>
                        <div class="layui-inline" style="margin-left: 20px;width: calc(70% - 20px) !important;">

                            <div class="file-loading">
                                <input id="task_img" type="file" name="fileHandler" multiple>
                            </div>
                    </div>
                    </div>
                </form>
                <!--结束-->
            </div>
            <div class="layui-tab-item layui-show" style="margin-top: 30px">
                <div class="layui-elem-quote">
                    <h2>投资情况</h2>
                </div>
                <table class="table table-bordered table-hover">
                    <tr class="info">
                        <td>总投资（万元）</td>
                        <td>累计完成投资（万元）</td>
                        <td>本期完成投资（万元）</td>

                    </tr>
                    <tr>
                        <td contenteditable='true' id="totalInvestment" th:text = "${taskfill.totalInvestment}"></td>
                        <td contenteditable='true' id="addInvestment" th:text = "${taskfill.addInvestment}"></td>
                        <td contenteditable='true' id="thisInvestment" th:text = "${taskfill.thisInvestment}"></td>
                    </tr>
                </table>
            </div>
            <div class="layui-form-item" style="height: 70px;line-height: 70px;margin-top: 30px;">
                <div class="layui-block" >
                    <label class="layui-form-label" style="width: calc(100% - 78.5%) !important;height: 70px;line-height: 50px">问题填报:</label>
                </div>
                <div class="layui-inline" style="margin-left: 20px;width: calc(70% - 20px) !important;">
                    <textarea id="taskSuggest" class="form-control" style="border-color: #666;"  th:field="${taskfill.taskSuggest}"></textarea>
                </div>
            </div>
            <div class="layui-tab-item">2</div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-fileinput-js2" />
<script th:inline="javascript">
    var taskImgPaths = [[${taskfill.taskImgPaths}]];
    var initPics = taskImgPaths == null?[]:taskImgPaths.split(",");
    var img_path = [];
    if(initPics != []){
        initPics.forEach(function (value, index) {
            img_path.push({fileName:value,keyId:"init_" + index})

        })
    }

    $(document).ready(function () {
        $("#task_img").fileinput({
            'theme': 'explorer-fas',
            'uploadUrl': '/common/upload',
            overwriteInitial: false,
            initialPreviewAsData: true,
            allowedFileExtensions: ["jpg", "png", "jpeg"], //接收的文件后缀
            maxFileCount:3,
            validateInitialCount:true,
            msgFilesTooMany: "选择上传的文件数量 超过允许的最大数值！",
            initialPreview: initPics
        });
        $("#task_img").fileinput('_initFileActions');//这行代码就是调用绑定删除事件的

    });

    $("#task_img").on("fileuploaded", function(event, data, previewId, index) {
        var url = data.response.pathUrl;
        var fileName = data.response.fileName;
        img_path.push({fileName:fileName,keyId:previewId});
    });


    $('#task_img').on('filepreremove', function(event, id, previewId) {
        console.log(previewId)
        for (var i = 0; i < img_path.length; i++) {
            if (img_path[i].keyId == previewId) {
                img_path.splice(i,1);
            }
        }
    });


            /**
     *
     */
    $('#task_img').on('filesuccessremove', function(event, previewId) {
        for (var i = 0; i < img_path.length; i++) {
            if (img_path[i].keyId == previewId) {
                img_path.splice(i,1);
            }
        }
    });

    /**
     * 清空文件后响应事件
     */
    $('#task_img').on('filecleared', function(event, previewId) {
        img_path = [];
    });

    $("#task-edit").validate({
        focusCleanup: true
    });
    var prefix = ctx + "linkong/fill";
    function submitHandler() {
        if ($.validate.form()) {
            var data = $("#task-edit").serializeArray();
            var imgs = [];
            img_path.forEach(function(ele,index){
                imgs.push(ele.fileName)
            })
            var imgStr = imgs.join(",");
            var totalInvestment = $("td#totalInvestment").text();
            var addInvestment = $("td#addInvestment").text();
            var thisInvestment = $("td#thisInvestment").text();
            var taskSuggest = $("textarea#taskSuggest").val();
            data.push({"name": "taskImgPaths", "value": imgStr});
            data.push({"name": "totalInvestment", "value": totalInvestment});
            data.push({"name": "addInvestment", "value": addInvestment});
            data.push({"name": "thisInvestment", "value": thisInvestment});
            data.push({"name": "taskSuggest", "value": taskSuggest});
            data.push({"name": "fillStatus", "value": "0"});
            $.operate.save(prefix + "/edit", data);
        }
    }
</script>
</body>
</html>